{% extends "base.html" %}

{% block content %}
    <div class="row">
        <div class="col-md-12 " style="padding-top: 5px;border: 1px solid #393939;">
            <div class="panel panel-primary" style="background-image: linear-gradient(to bottom right, #cae08e, #fff 150px);padding: 3px;border: 1px solid #d4d4d4;">
                <div class="panel-heading" style="padding: 3px;background: none;">
                    <h3 class="panel-title" style="color: #617f10;"><span class="glyphicon glyphicon-log-in"></span>&nbsp;新建下载</h3>
                </div>
                <div class="panel-body" style="padding:5px;background: none;">
                    <iframe id="iframe_display" name="iframe_display" style="display: none;"></iframe>
                    <form id="formdata" role="form" method="post" submit="return validate();" target="iframe_display">
                        <fieldset>
                            <div class="form-group col-md-3" style="margin-bottom: 0;margin-top: 3px;display: flex;justify-content: flex-start;">
                                <label for="input_filename" style="line-height: 16px;color: #9ea09f;padding-right: 10px;"><span class="glyphicon glyphicon-film"></span>&nbsp;{{ form.filename.label }}</label>
                                {{ form.filename }}
                                {% for err in form.filename.errors %}
                                    <div class="col-md-12" style="color: red;">{{ err }}</div>
                                {% end %}
                            </div>
                            <div class="form-group col-md-3" style="margin-bottom: 0;margin-top: 3px;display: flex;justify-content: flex-start;">
                                <label for="save_path" style="line-height: 16px;color: #9ea09f;padding-right: 10px;"><span class="glyphicon glyphicon-save"></span>{{form.savepath.label}}</label>
                                {{ form.savepath }}
                                {% for err in form.savepath.errors %}
                                    <div class="col-md-12" style="color: red;">{{ err }}</div>
                                {% end %}
                            </div>
{#                            <div class="form-group col-md-8" style="margin-bottom: 5px;">#}
{#                                <label for="input_filepath" style="float:left;line-height: 16px;color: #9ea09f;"><span class="glyphicon glyphicon-save"></span>&nbsp;{{ form.filepath.label }}</label>#}
{#                                {{ form.filepath }}#}
{#                                {% for err in form.filepath.errors %}#}
{#                                    <div class="col-md-12" style="color: red;">{{ err }}</div>#}
{#                                {% end %}#}
{#                            </div>#}
                            <div class="form-group col-md-5" style="margin-bottom: 0;margin-top: 3px;display: flex;justify-content: flex-start;">
                                <label for="input_fileurl" style="line-height: 16px;color: #9ea09f;padding-right: 10px;"><span class="glyphicon glyphicon-open"></span>&nbsp;{{ form.fileurl.label }}</label>
                                {{ form.fileurl }}
                                {% for err in form.fileurl.errors %}
                                    <div class="col-md-12" style="color: red;">{{ err }}</div>
                                {% end %}
                            </div>
                            {{ form.submit }}
                        </fieldset>
                    </form>
                </div>
            </div>
            <div class="panel panel-primary" style="background-image: linear-gradient(to bottom right, #b6d16d, #fff 150px);padding: 3px;border: 1px solid #d4d4d4;">
                <div class="panel-heading" style="background:none;padding: 3px;">
                    <h3 class="panel-title" style="color: #617f10;"><span class="glyphicon glyphicon-log-in"></span>&nbsp;当前下载</h3>
                </div>
                <div class="panel-body" style="padding:5px;background: none;">
                    <form role="form" method="post" target="iframe_display">
                        <fieldset id="download-films">
                        </fieldset>
                    </form>
                </div>
            </div>
            <div class="panel panel-primary" style="background-image: linear-gradient(to bottom right, #2ddc8d, #fff 150px);padding: 3px;border: 1px solid #d4d4d4;">
                <div class="panel-heading" style="background:none;padding: 3px;">
                    <h3 class="panel-title" style="color: #617f10;"><span class="glyphicon glyphicon-log-in"></span>&nbsp;下载完成</h3>
                </div>
                <div class="panel-body" style="padding:5px;background: none;">
                    <form role="form" method="post" target="iframe_display">
                        <fieldset id="downloaded-films">
                        </fieldset>
                    </form>
                </div>
            </div>

        </div>
    </div>
    <input id='copydata' v-model='product_url' style='opacity: 0;position: absolute;' type="text">
    <script src="{{ static_url('base/js/jquery.min.js') }}"></script>
    <!-- <script src="{{ static_url('base/js/polling-utils.js') }}"></script> -->
    <script src="{{ static_url('base/js/websocket.js') }}"></script>
    <script>
        var isclick= true;
        $(document).ready(function() {
            localStorage.setItem('filmslist',"[]");
            var url = '/downloading/list';
            var data = {};
            // polling('get', url, data).then(res => {console.log(res)})
            
        });
        function browseFolder(path){
            try{
                var Message = "\u8bf7\u9009\u62e9\u6587\u4ef6\u5939";
                var Shell = new ActiveXObject("Shell.Application");
                var Folder = Shell.BrowseForFolder(0,Message,64,17);
                if(Folder!=null){
                    Folder = Folder.items();
                    Folder = Folder.item();
                    Folder = Folder.Path;
                    if(Folder.charAt(Folder.length-1)!="\\"){
                        Folder = Folder+'\\'
                    }
                    document.getElementById(path).value = Folder;
                    return Folder;
                }
            }
            catch (e){
                alert(e.message);
            }
        }
        function copyData(obj){
            $('#copydata').val($(obj).text());
            var copydata = $('#copydata');
            copydata.select();
            document.execCommand("Copy");//执行复制
        }
        function validate(){
            return false;
        }
        function download(){
            if(isclick){
                isclick= false;

                var data = $("#formdata").serialize();
                $.ajax({
                    type:'post',
                    url:'/download_new',
                    data:data,
                    success:function(res){
                        console.log(res);
                    }
                });

                setTimeout(function(){ 
                    isclick = true;
                }, 500);
            }
        }
        function append(obj){
            console.log("导入");
            var id = $(obj).parent().parent().attr('id');
            var type = $(obj).parent().parent().attr('type');
            $.ajax({
                type:'get',
                url:'/append',
                data:{'id':id,'type':type,'utype':'0'},
                success:function(res){
                    console.log(res);
                    if(res.code==0){
                        var data = {'id':id,'type':0};
                        $.ajax({
                            type:'get',
                            url:'/del',
                            data:data,
                            success:function(res){
                                // console.log(res);
                                // if(res['status']){
                                //     $(obj).parent().parent().remove();
                                // }
                            }
                        })
                    }
                }
            })
        }
        function append2(obj){
            console.log("导入2");
            var id = $(obj).parent().parent().attr('id');
            var type = $(obj).parent().parent().attr('type');
            $.ajax({
                type:'get',
                url:'/append',
                data:{'id':id,'type':type,'utype':'1'},
                success:function(res){
                    console.log(res);
                    if(res.code==0){
                        var data = {'id':id,'type':0};
                        $.ajax({
                            type:'get',
                            url:'/del',
                            data:data,
                            success:function(res){
                                // console.log(res);
                                // if(res['status']){
                                //     $(obj).parent().parent().remove();
                                // }
                            }
                        })
                    }
                }
            })
        }
        function redownload(obj){
            var data = {'id':$(obj).parent().parent().attr('id'),'status':$(obj).attr('value')};
            $.ajax({
                type:'get',
                url:'/redownload',
                data:data,
                success:function(res){
                    console.log(res);
                }
            })
        }
        function stop(obj){
            var data = {'id':$(obj).parent().parent().attr('id'),'status':$(obj).attr('value')};
            $.ajax({
                type:'get',
                url:'/stop',
                data:data,
                success:function(res){
                    {#console.log(res);#}
                }
            })
        };
        function dele(obj){
            var data = {'id':$(obj).parent().parent().attr('id'),'type':1};
            $.ajax({
                type:'get',
                url:'/del',
                data:data,
                success:function(res){
                    // console.log(res);
                    // if(res['status']){
                    //     $(obj).parent().parent().remove();
                    // }
                }
            })
        }
        function deltask(obj){
            var data = {'id':$(obj).parent().parent().attr('id'),'type':0};
            $.ajax({
                type:'get',
                url:'/del',
                data:data,
                success:function(res){
                    // console.log(res);
                    // if(res['status']){
                    //     $(obj).parent().parent().remove();
                    // }
                }
            })
        }
        function play(obj){
            var id = $(obj).parent().parent().attr('id');
            $.ajax({
                type:'get',
                url:'/checkindex',
                data:{'id':id},
                success:function(res){
                    console.log(res.url);
                    // var url = "/downloadplay?section="+res.id+"&name="+res.name+"&url="+res.url;
                    var url = "/customPlay?section="+res.id+"&name="+res.name+"&type="+res.type+"&url="+res.url;
                    window.open(url);
                }
            })
        }
    </script>
{% end %}